<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>多彩校园</title>
    <link rel="stylesheet" href="css/dcxy.css">
    <style>
        *{
            margin:0;
            padding: 0;
        }
        body{
            background-color: black;
            /*overflow: hidden;
            height: 5000px;*/
        }
        #box{
            margin: 0 auto;
            position:relative;
        }
        #box div{
            position: absolute;
            padding: 0 5px 0 5px;
            cursor: pointer;
            transition: all .5s;
        }
        img{
            width:300px;
            vertical-align: top;
            height:auto;

        }
        #box div:hover{
            transform: scale(2);
            z-index: 999;
        }

    </style>
    <script src="js/jquery-1.11.1.js"></script>
</head>
<body>
<div class="head">
    <div class="center">
        <div>
           <p>多彩校园照片展示</p>
        </div>
    </div>
</div>
<div id="box"></div>
<div class="nva4">
    <div class="firs">
        <ul>
            <li class="ding1"><a href="#"><img src="images/小图标.png" class="tub">回到顶部</a></li>
            <li class="ding2"><a href="index.html"><img src="images/小图标.png" class="tub">回到首页</a></li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    window.onload = function(){
        var divH = [0,0,0,0,0,0,0,0,0,0];
        var h = [203, 225, 176, 153, 169, 124, 161, 171, 131,174];
        var box = document.getElementById("box");
        createE();
        createE();
        createE();
        function createE(){
            var vW = document.documentElement.clientWidth;
            var number = Math.floor(vW/310);
            //console.log(number);
            box.style.width = number*310 + "px";
            for(var i=1;i<=10;i++){
                var img = document.createElement("img");
                img.src = "images/"+i+".jpg";
                // alert(img.height);
                var div = document.createElement("div");
                div.appendChild(img);
                //alert(div.height);
                //alert(div.style.width);
//                    alert("1111")
                var indexM = minH(divH,number);
                //alert(index);
                div.style.top = divH[indexM] + "px";
                div.style.left = indexM*310 + "px";
                box.appendChild(div);
                       // alert(div.offsetHeight);
                divH[indexM] =divH[indexM] +h[i-1]+10;
//                divH[indexM] =divH[indexM] +div.offsetHeight+10;
                console.log(div.offsetHeight);
//                h[i]=div.offsetHeight
//                          console.log("执行了");
//                alert(divH[indexM]);
                //alert(divH);
            }
//            console.log(h);
        }
        function minH(obj,num){
            var min = 999999;
            var index = 0;
            for(var i=0;i<num;i++){
                if(obj[i]<min){
                    min = obj[i];
                    index = i;

                }
            }

            return index;

        }
        window.onscroll = function(){
            var scrollH = document.documentElement.scrollTop || document.body.scrollTop;//body卷去长度
            var vH = document.documentElement.clientHeight;

            if( (divH[0] - 200)<( scrollH + vH)){
                createE();
            }

        }
        window.onresize = function(){
            while(box.hasChildNodes()){
                box.removeChild(box.firstChild);
            }
            //alert(i);
            divH = [0,0,0,0,0,0,0,0,0,0];
            createE();
            createE();
            createE();
        }


    }
//    window.location.reload();
</script>